<template>
  <CDialog
    title="添加账号"
    :close-on-click-modal="false"
    v-model:visible="dialogVisible"
    @confirm="handleConfirm"
    :loading="props.loading"
    confirmText="添加"
    @cancel="dialogVisible = false"
  >
    <el-form label-position="top" class="user-form" :rules="rules">
      <el-form-item label="用户账号：" prop="username">
        <el-select
          v-model="userInfo"
          filterable
          :filter-method="onFilter"
          placeholder="请输入账号/邮箱/姓名进行查询后选择"
          value-key="id"
          class="user-info-select"
          suffix-icon=""
        >
          <el-option
            v-for="item in selectOptions"
            :key="item.id"
            :label="item.username"
            :value="item"
          >
            <COption :name="item.username" :subName="item.realName" />
          </el-option>
          <template #prefix>
            <CIcon style="color: #5f6677" type="c-xian-sousuo"></CIcon>
          </template>
        </el-select>
      </el-form-item>
      <div class="user-info" v-if="userInfo.id">
        <p class="user-name">用户名称：{{ userInfo.realName || '-' }}</p>
        <p class="user-name">用户电话：{{ userInfo.phone || '-' }}</p>
      </div>
    </el-form>
  </CDialog>
</template>

<script lang="ts" setup name="CSelectUserDialog">
import { defineProps, withDefaults, defineEmits, computed, watch, ref, reactive } from 'vue';
import { CDialog } from '@/components/CDialog';
import { GetUserListResult } from '@/apis/system/model/organizationModel';
import { getUserList } from '@/apis/system/organization';
import { COption } from '@/components/COption/index';
import { useMessage } from '@/hooks/useMessage';
import type { FormInstance, FormRules } from 'element-plus';

interface CSelectUserDialogProps {
  visible: boolean;
  loading?: boolean;
}
const props = withDefaults(defineProps<CSelectUserDialogProps>(), {});
const emits = defineEmits(['update:visible', 'confirm']);
const { createMessage } = useMessage();
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emits('update:visible', val);
  }
});
watch(
  () => dialogVisible.value,
  val => {
    if (!val) {
      init();
    } else {
      remoteMethod('');
    }
  }
);

interface RuleForm {
  id: string;
  username: string;
  realName: string;
  phone: string;
}

const rules = reactive({
  username: [{ required: true, trigger: 'blur' }]
});

const userInfo = ref<RuleForm>({
  // 用户Id
  id: '',
  // 用户账号
  username: '',
  // 用户名称
  realName: '',
  // 电话
  phone: ''
});
function init() {
  userInfo.value = {
    // 用户Id
    id: '',
    // 用户账号
    username: '',
    // 用户名称
    realName: '',
    // 电话
    phone: ''
  };
  selectOptions.value = [];
  sourceOptions.value = [];
}
const selectOptions = ref<GetUserListResult[]>([]);
const sourceOptions = ref<GetUserListResult[]>([]);
const remoteMethod = (query: string) => {
  getUserList(query).then((res: GetUserListResult[]) => {
    selectOptions.value = res;
    sourceOptions.value = res;
  });
};

function handleConfirm() {
  if (userInfo.value.id) {
    emits('confirm', userInfo.value.id);
  } else {
    createMessage.warning('请先选择用户！');
  }
}

const onFilter = (query: string) => {
  if (query) {
    const fields = ['username', 'realName'];
    selectOptions.value = sourceOptions.value.filter(
      n => !!fields.some(field => String(n[field]).toLowerCase().indexOf(query) > -1)
    );
  } else {
    selectOptions.value = sourceOptions.value;
  }
};
</script>

<style lang="scss" scoped>
.user-form {
  .el-form-item--default {
    margin-bottom: 8px;
  }
  .user-info {
    background: #f3f7fb;
    padding: 12px 16px;
    border-radius: 3px;
    border: 1px solid #ebeff2;

    .user-account {
      font-size: 14px;
      font-weight: bold;
      color: #212529;
      margin-bottom: 18px;
    }
    .user-name {
      font-size: 14px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #435970;
      line-height: 20px;
      &:nth-child(2) {
        margin-top: 4px;
      }
    }
  }
}
.el-input__suffix {
  display: none !important;
}
</style>
